<template>
  <div class="xy-table">
    <div class="xy-table-tip" v-show="tip"><i class="el-icon-warning"></i>{{tip}}</div>
    <div v-show="!infoTitle && !noTitle" class="xy-table-title">{{countTitle.split('{}')[0] || ''}} <span class="total">{{tableData.total}}</span> {{countTitle.split('{}')[1] || ''}}<a v-show="exportVisible" class="excel" @click="$emit('export')">{{exportText || '导出Excel'}}</a></div>
    <div v-show="infoTitle && !noTitle" class="xy-table-title"><slot name="infoTitle"></slot></div>
    <el-table
      ref="table"
      class="mgb15"
      :height="height"
      header-row-class-name="xy-table-header"
      row-class-name="xy-table-row"
      :data="tableData.list"
      v-loading="loading"
      :class="noEmpty ? 'no-empty' : ''"
      :show-summary="showSummary"
      @sort-change="sortChangeHandle"
       @selection-change="handleSelectionChange"
      :summary-method="summaryMethod"
      :border="border">
      <slot></slot>
      <div v-show="!noEmpty" slot="empty" class="empty">
        <template v-if="!init">
          <img src="../assets/images/empty-state/002.png" class="mgb10"/>
          <div>
            <p class="text-regular table-empty">{{emptyText}}</p>
            <el-button v-if="totalText != ''" type="text" @click="$emit('reset')">{{totalText}}</el-button>
          </div>
          
        </template>
      </div>
    </el-table>
    <!-- <div class="no-result" v-show="tableData.noResult">
      <div class="icon" :class="[position]"></div>
      <p>{{text}}<span v-if="searchText" @click="$emit('click')">{{searchText}}</span></p>
    </div> -->
    <el-pagination
      ref="pagination"
      class="mt-20"
      v-if="showPagination"
      background
      @current-change="pageChange"
      :current-page="tableData.page"
      :page-size="tableData.size"
      :total="tableData.total"
      layout="prev, pager, next">
    </el-pagination>
    <div style="height:20px;" v-else>

    </div>
  </div>
</template>

<script>
export default {
  name: 'Table',
  props: {
    loading: {
      default: false
    },
    countTitle:{
      type:String,
      default:"共查询到{}条记录"
    },
    exportText:{
      type:String,
      default:""
    },
    height:{
      type:[Number,String],
      default:null
    },
    tableData: Object,
    emptyText: {
      type: String,
      default: '暂无数据'
    },
    exportVisible: {
      type: Boolean,
      default: false
    },
    infoTitle: {
      type: Boolean,
      default: false
    },
    tip: {
      type: String,
      default: ''
    },
    noTitle: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: false
    },
    noEmpty: {
      type: Boolean,
      default: false
    },
    summaryMethod: {
      type: Function
    },
    showSummary: {
      type: Boolean,
      default: false
    },
    paginationShow: {
      type: Boolean,
      default: true
    },
    totalText: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      init: true
    }
  },
  watch: {
    loading: function(val, oldVal) {
      if(val == true) return;
      this.init = false
    },
    "tableData.page":function(){
      if(!this.$refs.pagination) return;
      this.$refs.pagination.lastEmittedPage = this.tableData.page;
    }
  },
  computed: {
    showPagination() {
      // console.log(this.tableData.total);
      // console.log(this.tableData.size);
      return this.paginationShow && (this.tableData.total > this.tableData.size)
    }
  },
  methods: {
    pageChange(page) {
      // console.log('分页组件=>',page);
      this.$emit('change', page)
    },
    sortChangeHandle(args){
      this.$emit('sort-change',args);
    },
    handleSelectionChange(args){
      this.$emit('selection-change',args);
    },
    tableLayout(){
      this.$refs.table && this.$refs.table.doLayout && this.$refs.table.doLayout();
    }
  },
  mounted(){
    this.$root.eventHandle.$on("TABLE_LAYOUT",()=>{
      this.tableLayout();
    });
    setInterval(()=>{
      this.tableLayout();
    },300);
  }
}
</script>
<style lang="scss" scoped>
@import '../assets/scss/variable.scss';
.xy-table {
  &-title {
    height: 34px;
    line-height: 34px;
    border: 1px solid $xy-border-color-base;
    border-bottom: 0px solid;
    font-size: 14px;
    color: $xy-text-color-primary;
    padding: 0 10px;
    span{
      &:nth-child(2){
        float: right;
        color: #9b9b9b;
      }
    }
  }
  &-tip{
    padding-bottom: 10px;
    i{
      margin-right: 5px;
    }
    i::before{
      color: #f4c14b;
    }
  }
  .total {
    color: $xy-color-main;
  }
  .empty {
    text-align: center;
    & img{
      width: 80px;
    }
  }
  .table-empty{
    display: inline;
  }
}
</style>
